<script setup>
import imgPrecinct from './child/imgPrecinct.vue'

import { getCategoryDetail } from '@/api/home'
import { imgUploadVerify } from '@/utils/auth'

import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'

const typeList = ref([
    { name: '拍整页', active: true },
    { name: '拍单题', active: false },
    { name: '跨页题', active: false },
])

// 页面携带参数
const queryItem = ref({})
// 查询详情信息
const queryInfo = ref({})
// 页面参数
const queryParams = ref({})

const cameraAttributes = ref({
    devicePosition: 'back', // 摄像头朝向 前置: front/ 后置: back
    flash: 'off', // 闪光灯 常亮: torch/ 关闭: off
    outputDimension: 'max', // 输出分辨率 低: low/ 中: medium/ 高: high
})


// 拍照
function takePhotoFn() {
    const ctx = uni.createCameraContext()
    ctx.takePhoto({
        quality: 'high',
        success: (res) => {
            queryParams.value.imageFailPath = res.tempImagePath
        }
    })
}

// 打开手电筒
function openFlashlightFn() {
    if (cameraAttributes.value.flash === 'off') {
        cameraAttributes.value.flash = 'torch'
    } else {
        cameraAttributes.value.flash = 'off'
    }
}

// 打开相册
async function openAlbumFn() {
    const res = await imgUploadVerify()
    queryParams.value.imageFailPath = res
}



// 获取分类详情
async function getCategoryDetailFn() {
    const res = await getCategoryDetail(queryItem.value.id)
    queryInfo.value = res.data
}


onLoad((e) => {
    if (e.item) {
        queryItem.value = JSON.parse(e.item)
    }
    getCategoryDetailFn()
})
</script>

<template>
    <div class='takePhotosAnswer'>
        <NavBar>{{ queryInfo?.title }}</NavBar>
        <div class="container">
            <camera :device-position="cameraAttributes.devicePosition" :flash="cameraAttributes.flash"
                :output-dimension="cameraAttributes.outputDimension" class="camera" style="width: 100%;height: 100%;">
            </camera>

            <div class="newSelection_box">
                <div class="x_box">
                    <div>平行纸面，文字对齐参考线，</div>
                    <div>请尽量包含题号信息</div>
                </div>
                <div class="y_box"></div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_placeholder"></div>
            <div class="footer_content">
                <div class="left" @click="openAlbumFn">
                    <i class="iconfont ai-icon-tuku"></i>
                </div>
                <div class="center" @click="takePhotoFn">
                    <div class="take_btn"></div>
                </div>
                <div class="right" :class="{ active: cameraAttributes.flash === 'torch' }" @click="openFlashlightFn">
                    <i class="iconfont ai-icon-shoudiantong"></i>
                </div>
            </div>
        </div>
    </div>
    <van-toast id="van-toast" />
    <imgPrecinct v-model:imageFailPath="queryParams.imageFailPath" :queryInfo="queryInfo"></imgPrecinct>
</template>

<style lang='scss' scoped>
.takePhotosAnswer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .container {
        flex: 1;
        position: relative;

        .camera {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .newSelection_box {
            .x_box {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                width: 100%;
                height: 435rpx;
                border-top: 2rpx solid rgba($color: #FFF, $alpha: 0.8);
                border-bottom: 2rpx solid rgba($color: #FFF, $alpha: 0.8);

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10rpx;
                text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);

                font-size: 36rpx;
                font-weight: bold;
                color: #FFFFFF;
            }

            .y_box {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0);
                width: 248rpx;
                height: 100%;
                border-left: 2rpx solid rgba($color: #FFF, $alpha: 0.8);
                border-right: 2rpx solid rgba($color: #FFF, $alpha: 0.8);
            }
        }
    }

    .footer {
        .footer_placeholder {
            height: 229rpx;
        }

        .footer_content {
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 229rpx;
            background: var(--a-main-tabNav-bg-color);
            padding: 28rpx 30rpx;

            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .center {
                box-sizing: border-box;
                width: 127rpx;
                height: 127rpx;
                border-radius: 50%;
                border: 6rpx solid var(--a-one-text-color);
                padding: 7rpx;

                .take_btn {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: var(--a-main-color);
                }
            }

            .left,
            .right {
                width: 100rpx;
                height: 100rpx;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;

                display: flex;
                align-items: center;
                justify-content: center;

                .iconfont {
                    font-size: 48rpx;
                    color: var(--a-one-text-color);
                }

                &.active {
                    background: var(--a-main-color);
                }
            }
        }
    }
}
</style>